<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <div class="layui-inline searcheBottom">
            <div class="layui-inline" style="margin-right: 30px;">
                <h3><b>当前交易所：${exchangeName!}</b></h3>
                <input id="exchangeId" name="exchangeId" class="layui-input" style="display: none" value="${id!}"/>
            </div>
        </div>
        <div class="layui-inline searcheBottom">
            交易对名称：
            <div class="layui-inline">
                <input id="transactionName" class="layui-input" name="transactionName" autocomplete="off" placeholder="交易对名称"/>
            </div>
        </div>
<!--        <div class="layui-inline searcheBottom">
            交易对别名：
            <div class="layui-inline">
                <input id="transactionAlias" class="layui-input" name="transactionAlias" autocomplete="off" placeholder="交易对别名"/>
            </div>
        </div>-->
        <div class="layui-inline searcheBottom">
            状态：
            <div class="layui-inline">
                <select  id="enableFlag" name="enableFlag" class="layui-input" style="padding: 0px 20px;">
                    <option value="">全部</option>
                    <option value="1">使用中</option>
                    <option value="0">已下架</option>
                </select>
            </div>
        </div>
        <div class="layui-inline searcheBottom">
            <a class="layui-btn" data-type="reload" id="search">搜索</a>
            <a class="layui-btn layui-btn-primary" id="reset">重置</a>
        </div>
        <div class="layui-inline searcheBottom">
            <div class="layui-inline" >
                &nbsp;
                <a data-opt="add" href="/manage/extrading/addtrapage?id=${id!}&exchangeName=${exchangeName!}" class="layui-btn">
                    <i class="layui-icon">&#xe608;</i>添加交易对</a>
                <a href="/manage/exchange/exchangeInfoList" class="layui-btn layui-btn-primary">返回</a>
                <a class="layui-btn" href="#" id="set"><i class="layui-icon">&#xe642;</i>批量启用</a>
            </div>
        </div>
    </blockquote>
    <span style="font-size: 16px;"><b>交易对列表</b></span>
    <table class="layui-hide" id="tableID" lay-filter="tableFilter"></table>
</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '/js/'
    });

    layui.use(['form', 'laydate','table','laydate','util'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,//表格
            laydate = layui.laydate,//日期
            util = layui.util;//工具类

        var id = parseInt(${id!});

        pageInit();

        //执行一个 table 实例
        function pageInit(){
            table.render({
                elem: '#tableID'
                ,url:'/manage/extrading/traList'
                ,where: {
                    exchangeId: id
                }
                ,method: 'post'
                ,cols: [[
                    {type:'checkbox'},
                    {field:'id', title: 'ID',width:150, sort: true}
                    ,{field:'transactionName', title: '交易对名称',align:'center'}
//                    ,{field:'transactionAlias', title: '交易对别名',align:'center'}
                    ,{field:'isDepth', title: '是否需要深度',align:'center',templet:function (d) {
                        if(d.isDepth == true){
                            return '<div class="layui-btn layui-bg-green layui-btn-xs">是</div>';
                        }else{
                            return '<div class="layui-btn layui-bg-gray layui-btn-xs">否</div>';
                        }
                    }}
                    ,{field:'enableFlag', title: '状态',align:'center',
                        templet: function(d){
                            if(d.enableFlag==true){
                                return '<div class="layui-btn layui-bg-green layui-btn-xs">使用中</div>'
                            } else{
                                return '<div class="layui-btn layui-bg-gray layui-btn-xs">已停用</div>'
                            }
                        }
                    },
                    {field:'selected', title: '精选状态',align:'center',
                        templet: function(d){
                            if(d.selected==1){
                                return '<div class="layui-btn layui-btn-danger layui-btn-xs">精选</div>'
                            } else{
                                return '<div class="layui-btn layui-bg-gray layui-btn-xs">非精选</div>';
                            }
                        }
                    },
                    {field:'createTime', title: '添加时间',sort: true,align:'center',
                        templet: function(d){
                            return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                        }
                    },{title:"操作", align:'center',width:320,templet: function(d){
                        var tool ="";
                        if(d.isDepth == true){
                            tool +=  '<a href="#" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="depth">取消深度</a>';
                        }else{
                            tool +=  '<a href="#" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="depth">设置深度</a>';
                        }
                        if(d.selected==1){
                            tool+= '<div class="layui-btn layui-btn-warm layui-btn-xs" lay-event="choice">取消精选</div>'
                        } else{
                            tool+= '<div class="layui-btn layui-bg-green layui-btn-xs" lay-event="choice">设为精选</div>';
                        }
                        if(d.enableFlag==true){
                            tool+= '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">停用</a>';
                        }else if(d.enableFlag==false){
                            tool+= '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">启用</a>';
                        }
                       return tool +='<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                    }}
                ]],
                limits:[10,15,20,25,30],
                limit:10,
                page: true
            });
        }

        //表格重载
        var active = {
            reload: function () {
                var transactionName = $('#transactionName');
                var transactionAlias = $('#transactionAlias');
                var exchangeId = $('#exchangeId');
                var enableFlag = $('#enableFlag');
                table.reload('tableID', {
                    where: {
                        transactionName: transactionName.val(),
                        transactionAlias: transactionAlias.val(),
                        exchangeId:exchangeId.val(),
                        enableFlag:enableFlag.val()
                    }
                });
            }
        };

        //将搜索框的值随请求传到后台
        $('#search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".layui-input").keydown(function (e) {
            if(e.keyCode == 13){
                $('#search').click();
            }
        });

        //重置
        $("#reset").on("click",function(){
            transactionName.value = '';
            transactionAlias.value='';
            enableFlag.value = '';
        });

        //表格监听
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if (obj.event == "edit") {
                $.ajax({
                    url:"/manage/extrading/enableExtrading",
                    type:"post",
                    dataType:"json",
                    data:{"id":data.id,"enableFlag":data.enableFlag},
                    success:function(count){
                        table.reload('tableID');
                    }
                })
            }else if(obj.event == "del"){
                $.ajax({
                    url:"/manage/extrading/deleteTra",
                    type:"post",
                    dataType:"json",
                    data:{"id":data.id},
                    success:function(count){
                        table.reload('tableID');
                    }
                })
            }
            else if(obj.event == "choice"){
                $.ajax({
                    url:"/manage/extrading/choicenessTra",
                    type:"post",
                    dataType:"json",
                    data:{"id":data.id,"selected":data.selected},
                    success:function(count){
                        table.reload('tableID');
                    }
                });
            }else if(obj.event == "tra"){
                location.href = "/manage/extrading/curTra?traId="+data.id;
            }else if(obj.event == "depth"){
                $.ajax({
                    url:"/manage/extrading/setDepth",
                    type:"post",
                    dataType:"json",
                    data:{"id":data.id,"isDepth":data.isDepth},
                    success:function(count){
                        table.reload('tableID');
                    }
                });
            }
        });

        $("#set").on("click",function () {
            var checkStatus = table.checkStatus('tableID')
                ,data = checkStatus.data;
            var checkList = JSON.stringify(data);
            if(data.length < 1){
                layer.msg('请选择数据', { icon: 7, shift: 6 });
            }else {
                $.ajax({
                    url:"/manage/extrading/setBatchStruts",
                    type:"post",
                    data:{"checkList":checkList},
                    dataType:"json",
                    success:function (res) {
                        if(res.code ==0){
//                            layer.msg(res.msg, { icon: 6, shift: 6 });
                            table.reload('tableID');
                        }
                    }
                })
            }
        })
    });
</script>
</body>

</html>